<template>
    <div>
        <h2>任务列表</h2>

        <!-- 当没有任务时显示 -->
        <p v-if="!rengwu.length">没有任务</p>
        <button @click="addRengwu">Add</button>
        <!-- 当有任务时显示 -->
        <ul v-if="rengwu.length">
            <li v-for="item in rengwu" :key="item.id">
                <span v-show="!item.active">{{ item.name }}</span>
                <span v-show="item.active" class="wancheng"><del>{{ item.name }}</del></span>
                <div>
                    <button @click="item.active = !item.active">
                        <span v-show="item.active">已完成</span>
                        <span v-show="!item.active">未完成</span>
                    </button>
                    <button @click="delRengwu(item.id)">del</button>
                </div>
            </li>
        </ul>

        <p>已完成任务数：{{ respect }}</p>
    </div>
</template>

<script setup lang='ts'>
import { computed, reactive } from 'vue';

const rengwu = reactive([
    {
        id: 1,
        name: '任务1',
        active: false
    },
    {
        id: 2,
        name: '任务2',
        active: true
    },
    {
        id: 3,
        name: '任务3',
        active: false
    }
])


const respect = computed(() => {
    let a = 0
    for (const e of rengwu) {
        if (e.active == true) {
            a++
        }
    }
    return a;
})

const addRengwu = () => {
    rengwu.push({
        id: rengwu.length + 1,
        name: `任务${rengwu.length + 1}`,
        active: false
    })
    let a = 0
    for (const e of rengwu) {
        e.id = a
        a++
    }
}
const delRengwu = (num: number) => {
    rengwu.splice(num, 1)
}


</script>

<style scoped>
ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin: 10px 0;
    padding: 5px;
    display: flex;
    justify-content: space-between;
}

.completed {
    color: green;
    text-decoration: line-through;
}

.not-completed {
    color: black;
}

button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
}

.wancheng {
    color: green;

}

button:hover {
    background-color: #0056b3;
}
</style>